.home {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  width: 100%;
  height: 100vh;
}
//动画
.modal-fade-enter-active,
.modal-fade-leave-active {
  transition: opacity 0.6s ease;
}

.modal-fade-enter, .modal-fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0;
}


.van-overlay {
  z-index: 1000 !important;
}

.loading-content {
  position: fixed;
  left: 50%;
  top: 50%;
}
.canvas1 {
  position: relative;
  z-index: 1;
}
.canvas5 {
  position: relative;
  left: -420px;
  z-index: 2;
}
.canvas7 {
  position: relative;
  left: -840px;
  z-index: 3;
}
.canvas2 {
  position: relative;
  z-index: 1;
}
.canvas6 {
  position: relative;
  left: -420px;
  z-index: 2;
}
.canvas8 {
  position: relative;
  left: -840px;
  z-index: 3;
}
::v-deep .van-progress {
  border-radius: 10px;
  border: 1px solid black;
}
::v-deep .van-overlay {
  z-index: 3000;
}
::v-deep .van-count-down {
  color: gold;
  font-size: 0.3rem;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
canvas {
  margin-right: 20px;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.back {
  position: absolute;
  right: 44px;
  top: 19px;
  width: 60px;
  height: 37px;
  background-image: url(../../img/back.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: right;
  z-index: 9999;
}

.advice_content {
  background-image: url(../../img/earn_diamand.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: right;
  box-sizing: border-box;
  width: 750px;
  height: 398px;
  position: relative;
  .close_advice {
    background-image: url(../../img/close_advice.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: right;
    box-sizing: border-box;
    width:41px;
    height:42px;
    position: absolute;
    right: 0;
    top: 53px;
  }
  .btn_group{
    div{
      background-image: url(../../img/go_now.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: right;
      box-sizing: border-box;
      width: 184px;
      height: 56px;
      position: absolute;
      bottom:-8px ;
    }
    div:nth-child(1){
      left: 60px;
    }
    div:nth-child(2){
      left: 268px;
    }
    div:nth-child(3){
      left:475px;

    }
  }
}

.game_container {
  background-image: url(../../img/bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: right;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  z-index: 50;
  width: 100%;
  height: 100vh;
  position: absolute;
  overflow-y: hidden;
  .back {
    position: absolute;
    left: 1195px;
    top: 19px;
    width: 60px;
    height: 37px;
    background-image: url(../../img/back.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: right;
    z-index: 9998;
  }
  // -webkit-overflow-scrolling:unset
  .game_frame {
    width: 916px;
    // height: 100vh;
    background-image: url(../../img/game_frame.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
    position: relative;

    .top {
      width: 100%;
      height: 90px;
      overflow: hidden;

      .now {
        position: absolute;
        top: 0;
        left: -11px;
        width: 159px;
        height: 95px;
        z-index: 666;
        background-image: url(../../img/flag.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: right;
        display: flex;
        justify-content: center;

        .first_col {
          margin-top: 18px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .first_col > span {
          min-width: 32px;
          height: 24px;
          line-height: 24px;
          text-align: center;
          font-size: 28px;
          color: gold;
        }
        .first_col > img {
          width: 27px;
          height: 27px;
        }
        .second_col {
          margin-top: 3px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .second_col > img:nth-child(1) {
          width: 35px;
          height: 20px;
        }
        .second_col > img:nth-child(2) {
          width: 24px;
          height: 20px;
        }
        .second_col > span {
          width: 20px;
          height: 20px;
          margin-top: -1px;
          line-height: 20px;
          text-align: center;
          font-size: 20px;
          color: gold;
        }
      }
      .count {
        position: absolute;
        right: 24px;
        top: 7px;
        width: 200px;
        height: 44px;
        background-image: url(../../img/count.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: right;
        .count_num {
          position: absolute;
          left: 130px;
          top: 11px;
          width: 28px;
          height: 24px;
          font-size: 18px;
          color: gold;
          display: flex;
          align-items: center;
        }
      }

      .total {
        position: absolute;
        right: 280px;
        top: 7px;
        width: 200px;
        height: 44px;
        background-image: url(../../img/getDiamand.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: right;
        .total_num {
          position: absolute;
          left: 138px;
          top: 12px;
          width: 43px;
          height: 21px;
          font-size: 26px;
          color: gold;
          line-height: 21px;
        }
      }
    }
    .content {
      position: absolute;
      top: 80px;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .loading-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999; /* 确保加载图层在其他内容之上 */
      }

      .loading-content {
        text-align: center;
        color: white;
      }

      .loading-indicator {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border-top: 3px solid white;
        border-right: 3px solid white;
        animation: spin 2s linear infinite;
      }

      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }

      .left_content {
        display: flex;
        width: 400px;
        height: 400px;
      }
      .middle {
        width: 18px;
        height: 400px;
        margin: 0 10px;
        background-image: url(../../img/middle.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: right;
      }
      .right_content {
        display: flex;
        width: 400px;
        height: 400px;
      }
    }
    .bottom {
      .refresh {
        position: absolute;
        top: 492px;
        left: 40px;
        width: 76px;
        height: 37px;
        background-image: url(../../img/refresh.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: right;
      }
      .tips {
        position: absolute;
        top: 492px;
        left: 273px;
        img {
          width: 31px;
          height: 31px;
          margin-right: 10px;
        }
      }
      .set {
        position: absolute;
        top: 486px;
        left: 529px;
        img {
          width: 39px;
          height: 39px;
          margin-right: 20px;
        }
      }
    }
  }
}
